<template>
<div id="detailContainer" class="detailSlide">
    <Theader title='影片详情'>
        <i class="iconfont icon-right" @click="goBack"></i>
    </Theader>
    <div id="content" class="contentDetail">
        <div class="detail_list">
            <div class="detail_list_bg" :style="bg(movie.mainpic)"></div>
            <div class="detail_list_filter"></div>
            <div class="detail_list_content">
                <div class="detail_list_img">
                    <img :src="movie.mainpic" alt="">
                </div>
                <div class="detail_list_info">
                    <h2>{{movie.title}}</h2>
                    <p>{{movie.daoyan}}</p>
                    <p>9.2</p>
                    <p>{{movie.type}}</p>
                    <p>{{movie.country}} / {{movie.duration}}</p>
                    <p>{{movie.time}}</p>
                </div>
            </div>
        </div>
        <div class="detail_intro">
            <p>{{movie.content}}</p>
        </div>
        <div class="detail_player swiper-container">
            <ul class="swiper-wrapper" >
                <li class="swiper-slide" v-for="person in movie.photos" :key="person.name">
                    <div>
                        <img :src="person.img" alt="">
                    </div>
                    <p>{{person.name}}</p>
                    <p>{{person.type}}</p>
                </li>
            </ul>
        </div>
    </div>
</div>
    
</template>

<script>
import Theader from '@/components/Theader'
export default {
    name:'Detail',
    components:{
        Theader
    },
    data(){
        return {
            movie:{}
        }
    },
    methods:{
        goBack(){
            this.$router.back();
        },
        bg(pic){
            return {
                backgroundImage:'url('+pic+')'
            }
        }
    },
    async created(){
        let id = this.$route.params.id;
        // console.log(id);
        let res = await this.$axios.get('/api/detail?id='+id)
        console.log(res);
        this.movie = res;
        this.$nextTick(function(){
            new Swiper('.detail_player' , {
            slidesPerView : 'auto',
            freeMode : true,
            freeModeSticky: true
	        });
        })
    }
}
</script>

<style scoped>
#detailContainer{
            position: absolute;
            top:0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 100;
            width: 100%;
            min-height:100%;
            background: #ffffff;
}
.detailSlide{
   animation: slide .5s;
}
 @keyframes slide{
        from{
            transform: translateX(100%);
        }
        to{
            transform: translateX(0);
        }
    }
#content.contentDetail{ display: block; margin-bottom:0;}
#content .detail_list{ height:200px; width:100%; position: relative; overflow: hidden;}
.detail_list .detail_list_bg{ width:100%; height:100%; background: url() 0 40%; filter: blur(20px); background-size:cover; position: absolute; left: 0; top: 0;}
.detail_list .detail_list_filter{ width:100%; height:100%; position: absolute;background-color: #40454d;opacity: .55; position: absolute; left: 0; top: 0; z-index: 1;}
.detail_list .detail_list_content{ display: flex; width:100%; height:100%; position: absolute; left: 0; top: 0; z-index: 2;}
.detail_list .detail_list_img{ width:108px; height: 150px; border: solid 1px #f0f2f3; margin:20px;}
.detail_list .detail_list_img img{ width:100%; height: 100%;}
.detail_list .detail_list_info{ margin-top: 20px;}
.detail_list .detail_list_info h2{ font-size: 20px; color:white; font-weight: normal; line-height: 40px;}
.detail_list .detail_list_info p{ color:white; line-height: 20px; font-size: 14px; color:#ccc;}

#content .detail_intro{ padding: 10px;}
#content .detail_player{ margin:20px;}
.detail_player .swiper-slide{ width:70px; margin-right: 20px; text-align: center; font-size: 14px;}
.detail_player .swiper-slide img{ width:100%; margin-bottom: 5px;}
.detail_player .swiper-slide p:nth-of-type(2){ color:#999;}

</style>